<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2 style="cursor: pointer;">一、选择器</h2>
  <h4>关于css属性选择器常用的有：</h4>
  <ul>
    <li>id选择器（#box），选择id为box的元素</li>
    <li>类选择器（.one），选择类名为one的所有元素</li>
    <li>标签选择器（div），选择标签为div的所有元素</li>
    <li>后代选择器（#box div），选择id为box元素内部所有的div元素</li>
    <li>子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素</li>
    <li>相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素</li>
    <li>群组选择器（div,p），选择div、p的所有元素</li>
    <li>伪类选择器</li>
    <ul>
      <li>:link ：选择未被访问的链接</li>
      <li>:visited：选取已被访问的链接</li>
      <li>:active：选择活动链接</li>
      <li>:hover ：鼠标指针浮动在上面的元素</li>
      <li>:focus ：选择具有焦点的</li>
      <li>:first-child：父元素的首个子元素</li>
    </ul>
    <li>伪元素选择器</li>
    <ul>
      <li>:first-letter ：用于选取指定选择器的首字母</li>
      <li>:first-line ：选取指定选择器的首行</li>
      <li>:before : 选择器在被选元素的内容前面插入内容</li>
      <li>:after : 选择器在被选元素的内容后面插入内容</li>
    </ul>
    <li>属性选择器</li>
    <ul>
      <li>[attribute] 选择带有attribute属性的元素</li>
      <li>[attribute=value] 选择所有使用attribute=value的元素</li>
      <li>[attribute~=value] 选择attribute属性包含value的元素</li>
      <li>[attribute|=value]：选择attribute属性以value开头的元素</li>
    </ul>
    <li>层次选择器（p~ul），选择前面有p元素的每个ul元素</li>
    <li>伪类选择器</li>
    <ul>
      <li>:first-of-type 父元素的首个元素</li>
      <li>:last-of-type 父元素的最后一个元素</li>
      <li>:only-of-type 父元素的特定类型的唯一子元素</li>
      <li>:only-child 父元素中唯一子元素</li>
      <li>:nth-child(n) 选择父元素中第N个子元素</li>
      <li>:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前</li>
      <li>:last-child 父元素的最后一个元素</li>
      <li>:root 设置HTML文档</li>
      <li>:empty 指定空的元素</li>
      <li>:enabled 选择被禁用元素</li>
      <li>:disabled 选择被禁用元素</li>
      <li>:checked 选择选中的元素</li>
      <li>:not(selector) 选择非 <selector> 元素的所有元素</li>
    </ul>
    <li>属性选择器</li>
    <ul>
      <li>[attribute*=value]：选择attribute属性值包含value的所有元素</li>
      <li>[attribute^=value]：选择attribute属性开头为value的所有元素</li>
      <li>[attribute$=value]：选择attribute属性结尾为value的所有元素</li>
    </ul>
  </ul>
  <h2>二、优先级</h2>
  <div>内联 > ID选择器 > 类选择器 > 标签选择器</div>
  <h2>三、继承属性</h2>
  <div>在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性</div>
  <br>
  <div>关于继承属性，可以分成：</div>
  <ul>
    <li>字体系列属性</li>
    <ul>
      <li>font:组合字体</li>
      <li>font-family:规定元素的字体系列</li>
      <li>font-weight:设置字体的粗细</li>
      <li>font-size:设置字体的尺寸</li>
      <li>font-style:定义字体的风格</li>
      <li>font-variant:偏大或偏小的字体</li>
    </ul>
    <li>文本系列属性</li>
    <ul>
      <li>text-indent：文本缩进</li>
      <li>text-align：文本水平</li>
      <li>line-height：行高</li>
      <li>word-spacing：增加或减少单词间的空白</li>
      <li>letter-spacing：增加或减少字符间的空白</li>
      <li>text-transform：控制文本大小写</li>
      <li>direction：规定文本的书写方向</li>
      <li>color：文本颜色</li>
    </ul>
    <li>元素可见性</li>
    <ul>
      <li>visibility</li>
    </ul>
    <li>表格布局属性</li>
    <ul>
      <li>caption-side：定位表格标题位置</li>
      <li>border-collapse：合并表格边框</li>
      <li>border-spacing：设置相邻单元格的边框间的距离</li>
      <li>empty-cells：单元格的边框的出现与消失</li>
      <li>table-layout：表格的宽度由什么决定</li>
    </ul>
    <li>列表属性</li>
    <ul>
      <li>list-style-type：文字前面的小点点样式</li>
      <li>list-style-position：小点点位置</li>
      <li>list-style：以上的属性可通过这属性集合</li>
    </ul>
    <li>引用</li>
    <ul>
      <li>quotes：设置嵌套引用的引号类型</li>
    </ul>
    <li>光标属性</li>
    <ul>
      <li>cursor：箭头可以变成需要的形状</li>
    </ul>
  </ul>
  <div>继承中比较特殊的几点：</div>
  <ul>
    <li>a 标签的字体颜色不能被继承</li>
    <li>h1-h6标签字体的大下也是不能被继承的</li>
  </ul>
  <h2>无继承的属性</h2>
  <ul>
    <li>display</li>
    <li>文本属性：vertical-align、text-decoration</li>
    <li>盒子模型的属性：宽度、高度、内外边距、边框等</li>
    <li>背景属性：背景图片、颜色、位置等</li>
    <li>定位属性：浮动、清除浮动、定位position等</li>
    <li>生成内容属性：content、counter-reset、counter-increment</li>
    <li>轮廓样式属性：outline-style、outline-width、outline-color、outline</li>
    <li>页面样式属性：size、page-break-before、page-break-after</li>
  </ul>
  <script>
    class Father{
      constructor(name){
        this.name = name
        this.age = 12
      }
    }
    function Child(name){
        this.name = name
      }
    console.log(Father.__proto__,Child.__proto__);
  </script>
</body>
</html>